cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
        _bodyBox: new cc.Rect(-20, -30, 40, 60),
        _atkBox: new cc.Rect(-80, -30, 60, 60),
    },

    // use this for initialization
    onLoad: function () {
        this.enableBox(true);
    },
    enableBox: function (enabled) {
        if (enabled) {
            this.drawBox(this._bodyBox);
            this.drawBox(this._atkBox);
        } else {
            this.clearBox();
        }
    },
    drawBox: function (box) {
        var ctx = this.getComponent(cc.Graphics);
        if (ctx) {
            cc.log(box);
            ctx.rect(box.x, box.y, box.width, box.height);
            ctx.stroke();
        }
    },
    clearBox: function () {
        var ctx = this.getComponent(cc.Graphics);
        if (ctx) {
            ctx.clear();
        }
    },
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});
